<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>layer2</title>
  <script type="text/javascript">
    (function () {
      var b = document.createElement("meta");
      b.setAttribute("name", "viewport");
      var c = window.devicePixelRatio,
        a = c ? 1 / c : 1;
      window.screen.availWidth == document.documentElement.offsetWidth && (c = a = 1);
      document.documentElement.setAttribute("data-dpr", c || 1);
      window.navigator.userAgent.match(/android/i) ? b.setAttribute("content", "width=device-width, initial-scale=" +
        a + ", maximum-scale=" + a + ", minimum-scale=" + a + ", user-scalable=no, viewport-fit=cover") : b.setAttribute(
        "content", "initial-scale=" + a + ", maximum-scale=" + a + ", minimum-scale=" + a +
        ", user-scalable=no, viewport-fit=cover");
      document.head.appendChild(b)
    })();
  </script>
  <script type="text/javascript">
    var dpr = document.documentElement.getAttribute("data-dpr") || 1,
      width = document.documentElement.offsetWidth,
      fontSize = 100 / 750 * width;
    document.querySelector("html").style.fontSize = fontSize + "px";
    window.addEventListener("resize", function () {
      var a = 100 / 750 * document.querySelector("html").offsetWidth;
      document.querySelector("html").style.fontSize = a + "px"
    });
  </script>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="box">
    <h1>允许弹窗内部滚动
      以上只是解决了一个问题：滑动弹窗其他地方背景页面确实未跟随滚动，但是没去弹窗可滚动区域到底部或顶部后，再滑动，背景页面仍可跟随滚动。
  
      所以仍需要对可滚动区域的滑动事件做监听：若向上滑动时，已到底部，或向下滑动时已到顶部，则阻止滑动事件。代码如下：</h1>
    <button id="btn">点击出弹层</button>
    <!-- layer -->
    <div class="layer" id="layer">
      <div class="layer-box">
        <div class="close" id="close">X</div>
        <div class="layer-cont">百度图片使用世界前沿的人工智能技术,为用户甄选海量的高清美图,用更流畅、更快捷、更精准的搜索体验,带你去发现多彩的世界。</div>
        <ul class="layer-list">
          <li>第一行</li>
          <li>第二行</li>
          <li>第三行</li>
          <li>第四行</li>
          <li>第五行</li>
          <li>第六行</li>

          <li>66666</li>

          <li>第一行</li>
          <li>第二行</li>
          <li>第三行</li>
          <li>第四行</li>
          <li>第五行</li>
          <li>第六行</li>
        </ul>
        <div class="btns">
          <div class="btn-confirm">确认</div>
          <div class="btn-cancel">取消</div>
        </div>
      </div>
    </div>

    <div class="for-height">
      为了称高度 - 百度图片使用世界前沿的人工智能技术,为用户甄选海量的高清美图,用更流畅、更快捷、更精准的搜索体验,带你去发现多彩的世界。
      <img src="http://www.pptbz.com/pptpic/UploadFiles_6909/201203/2012031220134655.jpg" alt="">
      百度图片使用世界前沿的人工智能技术,为用户甄选海量的高清美图,用更流畅、更快捷、更精准的搜索体验,带你去发现多彩的世界。
      <img src="http://pic3.nipic.com/20090527/1242397_102231006_2.jpg" alt="">
      百度图片使用世界前沿的人工智能技术,为用户甄选海量的高清美图,用更流畅、更快捷、更精准的搜索体验,带你去发现多彩的世界。
      <img src="http://pic22.nipic.com/20120714/9622064_105642209176_2.jpg" alt="">
      百度图片使用世界前沿的人工智能技术,为用户甄选海量的高清美图,用更流畅、更快捷、更精准的搜索体验,带你去发现多彩的世界。
      为了称高度 - 百度图片使用世界前沿的人工智能技术,为用户甄选海量的高清美图,用更流畅、更快捷、更精准的搜索体验,带你去发现多彩的世界。
      <img src="http://www.pptbz.com/pptpic/UploadFiles_6909/201203/2012031220134655.jpg" alt="">
      百度图片使用世界前沿的人工智能技术,为用户甄选海量的高清美图,用更流畅、更快捷、更精准的搜索体验,带你去发现多彩的世界。
      <img src="http://pic3.nipic.com/20090527/1242397_102231006_2.jpg" alt="">
      百度图片使用世界前沿的人工智能技术,为用户甄选海量的高清美图,用更流畅、更快捷、更精准的搜索体验,带你去发现多彩的世界。
      <img src="http://pic22.nipic.com/20120714/9622064_105642209176_2.jpg" alt="">
      百度图片使用世界前沿的人工智能技术,为用户甄选海量的高清美图,用更流畅、更快捷、更精准的搜索体验,带你去发现多彩的世界。
    </div>
  </div>
  <script>
    btn.onclick = function () {
      layer.style.display = 'block';
      document.body.style.overflow = 'hidden';
      document.body.style.position = 'fixed'; //果然是因为加了fixed，就会自动回滚到顶部
    }
    var closeBtn = document.getElementById('close');
    closeBtn.onclick = function () {
      layer.style.display = 'none';
      document.body.style.overflow = 'auto';
      document.body.style.position = 'static';
    }
    console.log(
      `
        直接还用之前的方法，给body一个overflow：hidden，和position：fixed就行了，弹窗部分直接设置超出滚动。

        但是滚动效果不太好，，没有原生滚动流畅。加一个属性:-webkit-overflow-scrolling: touch;

      `
    )
  </script>
</body>

</html>